<template>
  <section class="contact-list-panel-container bd-right">
    <!-- 搜索 -->
    <SearchComp></SearchComp>

    <ScrollView style="height: calc(100% - 51px)">
      <div class="panel">
        <!-- 好友 -->
        <UserListView v-if="type === 'friend'"></UserListView>

        <!-- 群聊 -->
        <GroupListVue v-if="type === 'group'"></GroupListVue>
      </div>
    </ScrollView>
  </section>
</template>

<script>
import SearchComp from '@/kang/components/SearchComp.vue'
import UserListView from './contact/UserListView.vue'
import GroupListVue from './contact/GroupListView.vue'
import store from '../../store'

export default {
  name: 'ContactListPanel',
  props: {
    type: {
      type: String,
      default: 'friend',
    },
  },
  data() {
    return {
      sharedSearchState: store.state.search,
    }
  },
  components: {
    SearchComp,
    UserListView,
    GroupListVue,
  },
}
</script>

<style lang="css" scoped>
.contact-list-panel-container {
  display: flex;
  flex-direction: column;
}

.panel {
  position: relative;
  background-color: var(--color-white);
  flex: 1;
}
</style>
